<template>
  <div class="system-container">
    <div class="user-container">
      <search-form
        class="searchTop border-shadow"
        :formModel="searchForm"
        :formList="userFormList"
      >
        <slot name="form-slot">
          <el-button
            type="primary"
            :size="btn_size"
            icon="el-icon-search"
            :id="tableParams.btnId"
          >搜索</el-button>
          <el-button
            type="primary"
            :size="btn_size"
            icon="el-icon-refresh"
          >重置</el-button>
        </slot>
      </search-form>
      <div class="table-btn">
        <el-button
          type="primary"
          :size="btn_size"
          icon="el-icon-plus"
          @click="handleClose"
        >新增</el-button>
      </div>
      <el-table
        v-loading="loading"
        align="center"
        ref="multipleTable"
        :data="listData"
        tooltip-effect="dark"
        style="width: 100%"
        @row-click="rowClick"
        :header-cell-style="{background:'#f5f7fa'}"
      >
        <table-tree-column
          ref='OrgiSort'
          @table-click="tableClick"
          prop="departmentName"
          header-align="center"
          treeKey="id"
          width="300"
          label="组织名称"
        ></table-tree-column>
        <el-table-column
          v-for="(item,index) in listHeadData"
          :key="index"
          :prop="item.prop"
          :sortable="item.sortable"
          :ref="item.ref"
          :width="item.width"
          :label="item.label"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <template v-if="item.prop === 'orgStatus'">
              dfs
              <!-- <span
                class="dot"
                :class="ORGINIZASTATUS[scope.row[item.prop]].split(',')[1]"
              ></span>
              <span class="statusText">{{ORGINIZASTATUS[scope.row[item.prop]].split(',')[0]}}</span> -->
            </template>
            <template v-else>
              {{scope.row[item.prop]?scope.row[item.prop]:'--'}}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="170"
          fixed="right"
          prop="btn"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-for="(j, idx) in tableParams.tableOption.btnList"
              :key="idx"
              :type="j.type"
              size="mini"
              plain
              @click="btnClick(j.pType, scope.scope)"
            >{{j.name}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <basic-dialog
        :title="userDialogTitle"
        :isVisible="userVisible"
        @confirmDialog="handleConfirm"
        @closeDialog="handleClose"
      >
        <slot>
          <rule-form
            :ruleForm="userForm"
            :rules="userRules"
            :ruleData="userData"
            ref='userForm'
          ></rule-form>
        </slot>
      </basic-dialog>
      <basic-dialog
        :title="filterDialogTitle"
        :isVisible="filterVisible"
        @confirmDialog="filterConfirm"
        @closeDialog="closeFilter"
      >
        <slot>
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
          >
          </el-input>

          <el-tree
            class="filter-tree"
            :data="filterTextData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            check-on-click-node
          >
          </el-tree>
        </slot>
      </basic-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ORGINIZASTATUS: this.$Constants.ORGINIZASTATUS,
      searchForm: {},
      userFormList: [
        {
          type: 'input',
          inputType: 'text',
          prop: 'searchField',
          placeholder: '请输入组织名称'
        },
        {
          type: 'select',
          prop: 'userStatus',
          placeholder: '请选择组织状态',
          options: [{
            value: '0',
            label: '正常'
          }, {
            value: '1',
            label: '停用'
          }]
        }
      ],
      listHeadData: [ // 列表 头部设置 数据
        { prop: 'orderNum', label: '排序' },
        { prop: 'enableStatus', label: '状态' },
        { prop: 'createTime', label: '创建时间' }
      ],
      tableParams: {
        mutiSelectName: 'orginiza',
        mutiSelectUniqueKey: 'id',
        btnId: new Date().getTime() + parseInt(Math.random() * 1000),
        listName: 'list',
        tableColumns: [
          {
            label: '组织名称',
            prop: 'departmentName'
          }, {
            label: '排序',
            prop: 'orderNum'
          }, {
            label: '状态',
            prop: 'enableStatus',
            addHtml: 'status'
          }, {
            label: '创建时间',
            prop: 'createDate'
          }
        ],
        tableOption: {
          btnList: [
            {
              type: 'primary',
              name: '新增',
              pType: 'create'
            },
            {
              type: 'primary',
              name: '编辑',
              pType: 'edit'
            },
            {
              type: 'danger',
              name: '删除',
              pType: 'delete'
            }
          ]
        }
      },
      getListApi: null,
      // 弹窗数据
      userDialogTitle: '新增用户',
      userVisible: false,
      userForm: {
        account: '',
        departmentId: '',
        superiorId: '',
        enableStatus: true
      },
      userData: [
        { label: '组织名称', prop: 'account', type: 'input' },
        { label: '显示排序', prop: 'departmentId', type: 'input' },
        { label: '组织状态', prop: 'superiorId', type: 'input' }
      ],
      userRules: {
        account: [{ required: true, message: '请输入登录名称', trigger: blur }]
      },
      // 部门弹窗
      filterDialogTitle: '选择组织',
      filterVisible: false,
      filterText: '',
      filterTextData: [
        {
          id: 1,
          label: '广汇集团',
          children: [
            {
              id: 10,
              label: '东北大区'
            }, {
              id: 11,
              label: '华南大区'
            }, {
              id: 12,
              label: '西北大区',
              children: [
                {
                  id: 100,
                  label: '新疆',
                  children: [
                    {
                      id: 1000,
                      label: '新疆克拉玛依华威4S店'
                    }, {
                      id: 1001,
                      label: '新疆克拉玛依华威4S店'
                    }
                  ]
                }, {
                  id: 101,
                  label: '陕西'
                }
              ]
            }
          ]
        }, {
          id: 2,
          label: '成都轱辘汽车服务公司',
          children: [
            {
              id: 20,
              label: '新疆克拉玛依华威4S店'
            }, {
              id: 21,
              label: '深圳市',
              children: [
                {
                  id: 200,
                  label: '南山区',
                  children: [
                    {
                      id: 2000,
                      label: '南山科技园片区'
                    }
                  ]
                }, {
                  id: 201,
                  label: '福田竹子林金融产业园区'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      listData: [
        {
          id: 1,
          departmentName: 'wangxp集团',
          orderNum: 1,
          enableStatus: 1,
          children: [
          ]
        },
        {
          id: 2,
          departmentName: '232',
          orderNum: 1,
          enableStatus: 1,
          children: [
            {
              id: 3,
              departmentName: '111111',
              orderNum: 1,
              enableStatus: 1
            }
          ]
        }
      ],
      loading: false

    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 确定,新增用户、编辑用户
    handleConfirm() {
      console.log(this.$refs.userForm)
      this.$refs.userForm.$children[0].validate((valid) => {
        if (valid) {
          this.handleClose()
        } else {
          console.log('error')
        }
      })
    },
    // 取消
    handleClose() {
      if (!this.userVisible && this.$refs.userForm) {
        this.$refs.userForm.$children[0].resetFields()
      }
      this.userVisible = !this.userVisible
    },
    // 按钮事件
    btnClick(pType, scope) {
      console.log(pType, scope)
      switch (pType) {
        case 'edit':
          this.editEvent(scope)
          break
        case 'delete':
          this.deleteEvent(scope.id)
          break
      }
    },
    // 编辑触发事件
    editEvent(row) {
      this.handleClose()
    },
    // 删除触发事件
    deleteEvent(id) {
      const that = this
      const tipData = {
        that: that,
        tipText: '是否删除当前记录',
        tipTitle: '提示',
        type: 'error',
        callBack: () => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      }
      this.$Common.confirmDialog(tipData)
    },
    // 部门弹窗
    selectDepart() {
      this.filterDialogTitle = '选择组织'
      this.closeFilter()
    },
    // 上级弹窗
    selectSuperior() {
      this.filterDialogTitle = '选择直接上级'
      this.closeFilter()
    },
    closeFilter() {
      this.filterVisible = !this.filterVisible
    },
    filterConfirm() {
      console.log(this.$refs.tree.getCheckedKeys(false, true))
      // this.closeFilter()
    },
    filterNode(value, data) {
      console.log(value, data)
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 表格方法
    rowClick(row, e, col) {
      console.log(row, e, col, 'row cliock data')
    },
    // 业务
    tableClick(that, index, row, data) {
      console.log(that, index, row, data)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.system-container {
  padding: 0 0 0 10px;
  margin: 20px 24px;
  background-color: #ffffff;
  overflow: hidden;
  .user-tree {
    margin-top: 20px;
    padding: 20px;
    float: left;
    width: 18%;
    .user-tree-top {
      height: 30px;
    }
  }
  .user-container {
    padding: 20px 10px 0px 20px;
    float: left;
    width: 82%;
  }
}
</style>